<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/lib/widget/bootstrap-slider.min.css}" />
    <th:block th:replace="~{/_include/header}" />
    <title>[[${bundle.L('列显示')}]]</title>
    <style>
      .slider.slider-horizontal {
        width: 100%;
        margin-top: 6px;
      }
      .mdi.mdi-sort-alphabetical-ascending {
        color: #878787;
        font-size: 18px;
      }
      .mdi.mdi-sort-alphabetical-ascending.asc,
      .mdi.mdi-sort-alphabetical-ascending.desc {
        color: #4285f4;
      }
      .mdi.mdi-sort-alphabetical-ascending.desc::before {
        content: '\F05BF';
      }
      .sortable-box-title .search-input {
        position: absolute;
        left: 0;
        top: -5px;
        width: 100%;
        background-color: #fff;
      }
      .sortable-box-title .search-input > input {
        border: 0 none;
        border-bottom: 1px solid #d5d8de;
        width: 100%;
        padding: 4px;
        appearance: none;
        outline: 0 none;
        background-color: transparent;
      }
      .sortable-box-title .search-input > input:focus {
        border-color: #4285f4;
      }
    </style>
  </head>
  <body class="dialog">
    <div class="main-content">
      <div class="row m-0">
        <div class="col-6 sortable-swap pl-2">
          <h5 class="sortable-box-title">[[${bundle.L('已显示')}]]</h5>
          <div class="sortable-box h380 rb-scroller">
            <ol class="dd-list J_config" th:_title="${bundle.L('无')}"></ol>
          </div>
          <i class="zmdi zmdi-swap"></i>
        </div>
        <div class="col-6 pr-2">
          <h5 class="sortable-box-title">
            [[${bundle.L('未显示')}]]
            <a class="search-btn" th:title="${bundle.L('筛选字段')}"><i class="zmdi zmdi-search"></i></a>
          </h5>
          <div class="sortable-box h380 rb-scroller">
            <ol class="dd-list unset-list"></ol>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <div class="float-left ml-1">
          <div id="shareTo" class="shareTo--wrap"></div>
        </div>
        <button class="btn btn-secondary btn-space" onclick="parent.RbModal.hide()" type="button">[[${bundle.L('取消')}]]</button>
        <button class="btn btn-primary J_save btn-space" type="button">[[${bundle.L('保存')}]]</button>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script th:src="@{/assets/lib/widget/bootstrap-slider.min.js}"></script>
    <script th:src="@{/assets/js/sortable.js}"></script>
    <script th:src="@{/assets/js/show-styles.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/general/list-fields.js}" type="text/babel"></script>
  </body>
</html>
